<template>
  <div class="bigbox">
    <div class="item" v-for="(item,id) in cityForm" :key="id">
      <div class="left">
        <img
          class="photo"
          :src="item.photos"
          alt
        />
      </div>
      <div class="middle">
        <nuxt-link :to="`/hotel/Particulars?id=${item.id}`" class="hotel_name">{{item.name}}</nuxt-link>
        <div class="english">
          <span>{{item.alias}}</span>
          <span class="iconfont iconhuangguan"></span>
          <span>高档型</span>
        </div>
        <div class="grade">
          <div class="grade_num">
            <div class="star">
              <i class="el-rate__icon el-icon-star-on"></i>
              <i class="el-rate__icon el-icon-star-on"></i>
              <i class="el-rate__icon el-icon-star-on"></i>
              <i class="el-rate__icon el-icon-star-on"></i>
              <i class="el-rate__icon el-icon-star-on"></i>
            </div>
            <i>4分</i>
          </div>
          <div>
            <i>77</i>
            条评论
          </div>
          <div>
            <i>90</i>
            篇游记
          </div>
        </div>
        <div class="location iconfont iconlocation">
          位于：
          <i>{{item.address}}</i>
        </div>
      </div>
      <div class="right">
        <div class="company" v-for="(items,index) in item.products" :key="index">
          <i>{{items.name}}</i>
          <i class="sign">
            ￥{{items.price}}
            <i class="sign_up">
              起
              <i class="el-icon-arrow-right"></i>
            </i>
          </i>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: ["cityForm"],
  mounted() {
    console.log(this.cityForm)
  },
};
</script>

<style lang="less" scoped>
.bigbox {
  .item {
  display: flex;
  padding: 25px 0;
  border-bottom: 1px solid rgb(238, 238, 238);
    .left {
      width: 320px;
      .photo {
        width: 100%;
      height: 210px;
      }
    }
    .middle {
      width: 425px;
      margin: 0 10px;
      .hotel_name {
        font-size: 24px;
      }
      .english {
        color: rgb(153, 153, 153);
      }
      .grade {
        display: flex;
        justify-content: space-between;
        margin: 10px 0;
        .grade_num {
          display: flex;
        }
        .star {
          i {
            margin: 0;
          }
        }
        i {
          color: rgb(247, 186, 42);
          margin-left: 5px;
        }
      }
      .location {
        color: rgb(102, 102, 102);
        font-size: 12px;
      }
    }
    .right {
      width: 235px;
      margin: 0 10px;
      font-size: 14px;
      color: rgb(96, 98, 102);
      .company {
        display: flex;
        justify-content: space-between;
        padding: 0 20px;
        align-items: center;
        height: 48px;
        border-bottom: 1px solid rgb(235, 238, 245);
        .sign {
          color: rgb(255, 153, 0);
          .sign_up {
            color: rgb(96, 98, 102);
          }
        }
      }
    }
  }
}
</style>